<template>
  <div class="pageContainer clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
    <div class="heading"><span class="redTitle">千人千面的收入分析 </span></div>

    <div class="content clearfix">
      <div class="subTitle">一、 收入指标完成情况</div>
      <div class="list-content">
        <div class="item-content" v-for="(item,index) in listData" :key="index">
            <span class="itemLabel">{{item.indexName}}:</span>
            <span class="itemDec">{{item.example}}</span>
        </div>
      </div>
      <div class="subTitle">二、 收入拉动(长短板分析，量收、活动结合)</div>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { $budgetAPI } from "@/api";
export default {
    name: "pageContainer",
    props: ["areaId", "month"],
    data() {
        return {
            loading: false,
            listData: []
        };
    },
    methods: {
        async init() {
            try {
                this.loading = true;
                let data = await this.fetch($budgetAPI.getSrbzIncomeList, {
                    areaId: this.areaId,
                    month: this.month,
                });

                this.listData = data.content
            } catch (error) {
                console.log(error);
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style  lang="scss" scoped>
.pageContainer {
    page-break-inside: avoid;
    padding: 20px;
    border: 1px solid #dee5f3;
    border-radius: 5px;
    position: relative;

    .pageContainer.clearfix:after,
    .pageContainer.clearfix:before {
        content: "";
        display: table;
    }
    .pageContainer.clearfix:after {
        clear: both;
    }
    .logoBg {
        position: absolute;
        right: 20px;
        top: 20px;
    }
    .pageContainer.clearfix {
        *zoom: 1;
    }
    .heading {
        font-size: 22px;
        font-weight: 700;
        text-align: center;
        padding-bottom: 40px;
        .redTitle {
            color: #c00000;
        }
    }
    .content {
        position: relative;
        .content.clearfix:after,
        .content.clearfix:before {
            content: "";
            display: table;
        }
        .content.clearfix:after {
            clear: both;
        }

        .subTitle {
            font-size: 14px;
            font-weight: 500;
                 padding-bottom: 10px;
        }

        .list-content{
            display: flex;
            flex-direction: column;
            .item-content{
                display: flex;
                margin-bottom: 8px;
                padding-left: 24px;
              
                .itemLabel{
                    font-weight: 600;
                    flex-basis: 80px;
                }
                .itemDec{
                    flex: 1;
                }
            }
        }
    }
    // .pageContanerLeft{
    //   width: 38%;
    //   float: left;
    //   margin-top: 20px;
    //   .content{
    //     border:1px solid #e5e5e5;
    //     position: relative;
    //     border-radius: 10px;
    //     padding: 20px;
    //     &:before{
    //       content:"";
    //       position:absolute;
    //       left:25%;
    //       top:-2px;
    //       width:50%;
    //       height:2px;
    //       background-color:#fff
    //     }
    //     .contentTitle{
    //       position: absolute;
    //       left: 50%;
    //       top: -14px;
    //       transform: translateX(-50%);
    //       font-size: 18px;
    //       font-weight: 700;
    //       text-align: center;
    //       .contentTitleFont{
    //         font-size: 15px;
    //         font-weight: 700;
    //       }
    //     }
    //     ul{
    //       padding-top: 70px;
    //       li{
    //         position: relative;
    //         height: 60px;
    //         line-height: 60px;
    //         .desc{
    //           font-size: 18px;
    //           font-weight: 700;

    //         }
    //         .desc.descWid{
    //           position: absolute;
    //           top: 50%;
    //           transform: translateY(-50%);
    //         }
    //         .descNumber.redTitle{
    //           font-size: 18px;
    //           font-weight: 700;
    //           color:#c00000;
    //           float: right;
    //         }
    //         .descNumber.buleTitle{
    //           font-size: 18px;
    //           font-weight: 700;
    //           color:#5585bf;
    //           float: right;
    //         }
    //         .secondTitle{
    //           padding-left: 120px;
    //           font-size: 15px;
    //           height: 30px;
    //           line-height: 30px;
    //           .title{
    //             display: inline-block;
    //             font-size: 15px;
    //           }

    //           .title.marg{
    //             margin-bottom: 10px;
    //           }
    //         }
    //       }
    //       li:nth-child(3){
    //         margin: 10px 0;
    //       }
    //       li:nth-child(4){
    //         margin: 10px 0;
    //       }
    //     }
    //   }

    // }
    // .pageContanerRight{
    //   width:60%;
    //   float: right;
    //   margin-top: 20px;
    //   .content{
    //     border:1px solid #e5e5e5;
    //     position: relative;
    //     border-radius: 10px;
    //     padding: 20px;
    //     &:before{
    //       content:"";
    //       position:absolute;
    //       left:25%;
    //       top:-2px;
    //       width:50%;
    //       height:2px;
    //       background-color:#fff
    //     }
    //     .contentTitle{
    //       position: absolute;
    //       left: 50%;
    //       top: -14px;
    //       transform: translateX(-50%);
    //       font-size: 18px;
    //       font-weight: 700;
    //       text-align: center;
    //       .contentTitleFont{
    //         font-size: 15px;
    //         font-weight: 700;
    //       }
    //     }
    //     .rowPadd{
    //       padding-top: 30px;
    //       .el-row{
    //         height:60px;
    //         line-height: 60px;
    //         .el-col{
    //           text-align: center;
    //           .progress-bar{
    //             width: 80%;
    //             display: inline-block;
    //             /deep/ .el-progress-bar__innerText{
    //               color:#000;
    //             }
    //           }
    //           .title{
    //             color:#5197ea;
    //             font-size: 18px;
    //             text-align: center;
    //           }
    //           .desc{
    //             font-size: 18px;
    //             font-weight: 700;
    //           }
    //           .completion{
    //             height: 30px;
    //             line-height: 30px;

    //           .completionNumber{
    //             font-size: 18px;
    //             font-weight: 700;
    //             color:#5585bf;
    //            }
    //           .arriveNumber{
    //             font-size: 15px;
    //            }
    //            }
    //            .completionNumber{
    //             font-size: 18px;
    //             font-weight: 700;
    //             color:#5585bf;
    //            }
    //         }
    //       }
    //       .el-row:nth-child(1){
    //         line-height: 40px;
    //         height: 40px;
    //       }
    //       .el-row:nth-child(6){
    //         line-height: 30px;
    //         height: 30px;
    //         .el-col{
    //           text-align: left;
    //           .redTitle{
    //             color:#c00000;
    //             font-size: 15px;
    //             position: absolute;
    //             // left: 46.6%;
    //           }
    //         }

    //       }
    //     }

    //   }
    // }
}
</style>
